<template>
	<van-pull-refresh v-model="loading" @refresh="onRefresh" style="background-color: #0389ff">
		<div
			id="bcid"
			:class="{
				'container-box': list && list.length > 0,
				'container-box-noData': list && list.length == 0
			}"
		>
			<van-loading v-if="loading" class="loadingBox" />
			<!-- <commonNavBar title="能力评估系统" :isRightIcon="false" :isLeftIcon="false"></commonNavBar> -->
			<div class="container">
				<div class="topBanner">
					<img class="topBannerImg" src="../../assets/img/topBanner.png" alt="" />
					<div class="userImgBox">
						<div class="userImgBox2">
							<img
								class="userImg"
								:src="
									userImgSrc && userImgSrc.length > 0
										? userImgSrc
										: defaultUserImg
								"
								alt=""
							/>
						</div>
					</div>
					<div class="userNameBox">{{ timeText }}，某先生/女士</div>
				</div>
				<div class="content-box">
					<div class="tips-box">
						<div class="tips">
							<div class="title">消息提醒</div>
							<div class="value">数值一：1111 &nbsp;&nbsp; 数值二：2222</div>
						</div>
					</div>
					<div class="tabBox">
						<ul>
							<li @click="go('/demo',1)">
								<div v-if="handleMsg.num" class="num">
									{{ handleMsg.num }}
								</div>
								<img src="../../assets/img-common/daipinggu.png" alt="" />
								<span>待处理</span>
							</li>
							<li @click="go('/demo',2)">
								<img src="../../assets/img-common/yuqiweipinggu.png" alt="" />
								<span>公共组件</span>
							</li>
							<li @click="go('/demo',3)">
								<img src="../../assets/img-common/pinggurili.png" alt="" />
								<span>定位</span>
							</li>
							<li @click="go('/demo',4)">
								<img src="../../assets/img-common/duixiangcaiji.png" alt="" />
								<span>菜单</span>
							</li>
							<li @click="go('/demo',5)">
								<img src="../../assets/img-common/pingguduixiang.png" alt="" />
								<span>菜单</span>
							</li>
							<li @click="go('/demo',6)">
								<img src="../../assets/img-common/pinggudangan.png" alt="" />
								<span>菜单</span>
							</li>
							<li @click="go('/demo',7)">
								<img src="../../assets/img-common/pinggutongji.png" alt="" />
								<span>菜单</span>
							</li>
							<li></li>
						</ul>
					</div>
					<div class="listBox">
						<!-- 公共评估部分 -->
						<div class="list" :style="{ height: total == 0 ? 'auto' : 'auto' }">
							<div class="listItemTitleBox">
								<span>列表</span>
							</div>
							<van-empty v-if="total == 0" description="暂无数据" />
							<div class="listItemBox" v-for="(item, i) in list" :key="i">
								测试数据{{ i }}
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 拨打电话 -->
			<a style="visibility: hidden" ref="phoneA" :href="'tel:' + currentPhone"></a>
		</div>
	</van-pull-refresh>
</template>

<script>
import { mapGetters } from 'vuex'
import { wait_pinggu_list, get_num } from '@/api/PGXT.js'
import { Dialog } from 'vant'
import { methodsMixins } from '@/utils/mixins.js'
export default {
	name: 'GZT',
	components: {},
	mixins: [methodsMixins],
	computed: {
		...mapGetters(['userInfos', 'version'])
	},
	data() {
		return {
			isLoading: false,
			currentPhone: '',
			handleMsg: {
				num: 1
			},
			total: '3',
			manImg: require('../../assets/img/man.png'),
			womenImg: require('../../assets/img/women.png'),
			defaultUserImg: require('../../assets/img/personal_head_img.png'),
			loading: false,
			list: [1, 2, 3],
			timeText: '上午好',
			userImgSrc: ''
		}
	},
	created() {
		this.timeText = this.getTimeState()
		// this.getNum()
		// this.getList()
	},
	methods: {
		onRefresh() {
			// this.getNum()
			// this.getList()
		},
		getNum() {
			get_num().then((res) => {
				if (res.succeed) {
					// this.handleMsg = res.data
				}
			})
		},
		toTell(phone) {
			Dialog.confirm({
				title: '提示',
				message: `是否拨打电话${phone}`
			})
				.then(() => {
					this.currentPhone = phone
					this.$refs.phoneA.click()
				})
				.catch(() => {
					// on cancel
				})
		},
		go(path,num) {
			this.$store.commit('user/SET_ID', '112322')
			this.$router.push({
				path: path,
				query:{
					num:num
				}
			})
		},
		getList() {
			let params = {
				pageNum: 1,
				pageSize: 2,
				today: true
			}
			this.loading = true
			wait_pinggu_list(params).then((res) => {
				if (res.succeed) {
					this.total = res.total
					res.data.splice(2)
					this.list = res.data
				}
				this.loading = false
			})
		},
		getTimeState() {
			// 获取当前时间
			let timeNow = new Date()
			// 获取当前小时
			let hours = timeNow.getHours()
			// 设置默认文字
			let text = ``
			// 判断当前时间段
			if (hours >= 0 && hours <= 10) {
				text = `上午好`
			} else if (hours > 10 && hours <= 14) {
				text = `中午好`
			} else if (hours > 14 && hours <= 18) {
				text = `下午好`
			} else if (hours > 18 && hours <= 24) {
				text = `晚上好`
			}
			// 返回当前时间段对应的状态
			return text
		}
	}
}
</script>
<style lang="less" scoped>
// font-size: 标准字体大小统一为34px
.container-box {
	height: calc(100vh - 130px);
	// height: 100vh;
	overflow: auto;
	background-color: #f8f8f8;
}
.container-box-empty {
	height: calc(100vh - 60px);
	// height: 100vh;
	overflow: auto;
	background-color: #f8f8f8;
}
/deep/ .van-empty {
	padding: 0;
}
.container {
	width: 100%;
	margin: 0 auto;
	background-color: #f8f8f8;
	// overflow: auto;
	.topBanner {
		width: 100%;
		position: relative;
		margin: 0px auto;
		height: 420px;

		.topBannerImg {
			width: 100%;
			height: 100%;
		}

		.userImgBox {
			position: absolute;
			top: 120px;
			right: 140px;
			width: 103px;
			height: 103px;
			border-radius: 103px;
			background-color: #68b4f2;
			display: flex;
			justify-content: center;
			align-items: center;

			.userImgBox2 {
				width: 80px;
				height: 80px;
				border-radius: 80px;
				overflow: hidden;
				.userImg {
					width: 100%;
					height: 100%;
				}
			}
		}

		.userNameBox {
			position: absolute;
			top: 250px;
			right: 60px;
			font-size: 34px;
			font-weight: bold;
			color: #fff;
		}
	}

	.content-box {
		width: calc(100% - 70px);
		margin: 0 auto;

		.tips-box {
			position: relative;
			// margin-bottom: 30px;
			width: 100%;
			// padding: 20px 0px;
			height: 40px;
			margin-bottom: 15px;
			border-radius: 10px;

			.tips {
				width: 100%;
				height: 103px;
				margin: 0 auto;
				position: absolute;
				// padding: 20px;
				left: 0;
				top: -68px;
				display: flex;
				background-color: #fff;
				align-items: center;
				border-radius: 10px;

				.title {
					margin: 10px 40px;
					width: 59px;
					height: 63px;
					font-size: 28px;
					font-family: CTZongYiSF;
					font-weight: bold;
					font-style: italic;
					color: #333333;
					line-height: 36px;
				}

				.value {
					width: calc(100% - 180px);
					font-size: 28px;
					font-family: PingFang SC;
					// font-weight: 00;
					color: #333333;
					line-height: 34px;
				}
			}
		}

		.tabBox {
			background-color: #fff;
			// height: 100px;
			// margin-bottom: 30px;
			border-radius: 10px;
			margin-bottom: 20px;

			ul {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				padding: 10px 0px;

				li {
					// flex: 1;
					width: 25%;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-wrap: wrap;
					text-align: center;
					position: relative;
					margin: 20px 0;

					.num {
						position: absolute;
						right: 22px;
						top: -14px;
						font-size: 26px;
						color: #fff;
						width: 35px;
						height: 35px;
						border-radius: 35px;
						background-color: red;
						font-weight: bold;
					}

					img {
						width: 90px;
					}

					span {
						width: 100%;
						margin-top: 20px;
						font-size: 26px;
					}
				}
			}
		}

		.listBox {
			// height: 100px;
			padding-bottom: 40px;
			.listTitleBox {
				background-color: #fff;
				border-bottom: 1px solid #f3f3f3;
				padding: 20px 30px;
				display: flex;
				justify-content: space-between;
				align-items: center;

				span {
					&:nth-child(1) {
						color: #000000;
						font-size: 30px;
						//  font-weight: bold;
					}

					&:nth-child(2) {
						display: flex;
						justify-content: center;
						align-items: center;

						span {
							margin-right: 5px;
							color: #a5a5a5;
							font-size: 28px;
						}

						img {
							width: 32px;
						}
					}
				}
			}
			.listItemTitleBox {
				background-color: #fff;
				display: flex;
				// margin: 30px 0;
				padding: 20px 0 20px 40px;
				justify-content: flex-start;
				align-items: center;
				border-bottom: 1px solid #f3f3f3;
				font-weight: bold;
				&::before {
					width: 7px;
					height: 35px;
					border-radius: 4px;
					content: '';
					display: block;
					background-color: #33a1ff;
				}

				span {
					font-size: 30px;
					padding-left: 12px;
				}
			}
			.listItemBox {
				position: relative;
				padding: 10px 30px 20px 30px;
				margin: 0 auto 15px auto;
				background-color: #fff;
				font-size: 26px;
			}

			.line {
				// margin: 0 30px;
				border-top: 1px solid #333333;
			}
		}
	}
}
/deep/ .van-pull-refresh__head {
	color: #fff;
}
</style>
